<template>
  <div class="customMessage">
    <el-form class="m7-form" size="mini" :model="customMessage"
      ref="customMessageForm" label-position="top">
      <el-form-item label="访客超时自动结束会话设置" size="mini">
        <span slot="label">
          访客超时自动结束会话设置
          <el-switch
            style="marginLeft: 5px"
            v-model="customMessage.isAutoClose">
          </el-switch>
        </span>
        <el-input class="ipt" type="number" v-model.number="customMessage.autoCloseTime" placeholder="请输入" size="mini">
        </el-input><span class="tip">分钟后访客无消息自动结束</span>
      </el-form-item>
      <el-form-item size="mini">
        <span slot="label">
          自动结束会话文案
          <el-tooltip placement="top">
            <div slot="content">会话结束时，文案将当作系统消息推送给访客</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          </el-tooltip>
        </span>
        <el-input class="text" type="textarea" v-model.number="customMessage.autoCloseMessage" placeholder="请输入" size="mini" maxlength="100"
          show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="即将关闭提示设置" size="mini">
        <span slot="label">
          即将关闭提示设置
          <el-switch
            style="marginLeft: 5px"
            v-model="customMessage.isOpenBreakSessionTip">
          </el-switch>
        </span>
        <span class="tip" style="marginLeft:0px">关闭前</span>
        <el-input class="ipt" type="number" v-model.number="customMessage.breakSessionTime" placeholder="请输入" size="mini">
        </el-input><span class="tip">分钟提示访客</span>
      </el-form-item>
      <el-form-item label="即将关闭提示文案" size="mini">
        <el-input class="text" type="textarea" v-model.number="customMessage.breakSessionMessage" placeholder="请输入" size="mini" maxlength="100"
          show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="访客等待安抚语设置" size="mini">
        <span slot="label">
          访客等待安抚语设置
          <el-switch
            style="marginLeft: 5px"
            v-model="customMessage.isWaitPacify">
          </el-switch>
        </span>
        <span class="tip" style="marginLeft:0px">访客等待</span>
        <el-input class="ipt" type="number" v-model.number="customMessage.waitPacifyTime" placeholder="请输入" size="mini">
        </el-input><span class="tip">秒后将自动发送以下安抚语</span>
      </el-form-item>
      <el-form-item size="mini">
        <el-input class="text" type="textarea" v-model.number="customMessage.waitPacifyMessage" placeholder="请输入" size="mini" maxlength="100"
          show-word-limit>
        </el-input>
        <div class="tipBox">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tooltip"></i>
          支持渠道网站、wap、H5、移动SDK、小程序SDK、微信小程序SDK、企业微信
        </div>
      </el-form-item>
    </el-form>
    <div class="btn fr">
      <el-button type="primary" size="mini" @click="saveFun">保存</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { BasicModule } from '@/store/modules/config/basic'
@Component({
  name: 'customMessage'
})
export default class CustomMessage extends Vue {
  private $message: any
  private customMessage = {
    autoCloseMessage: '非常抱歉，由于您长时间未说话，您的会话已被系统关闭。若有问题，您可以再次发起咨询！',
    isAutoClose: false,
    autoCloseTime: 10,
    isWaitPacify: false,
    waitPacifyTime: 10,
    breakSessionTime: 2,
    isOpenBreakSessionTip: false,
    breakSessionMessage: '非常抱歉，由于您长时间未说话，系统即将关闭您的会话，如有未解决问题，清及时回复！',
    waitPacifyMessage: '客服正在快马加鞭赶来～～'
  }

  private saveFun () {
    const {
      autoCloseTime,
      waitPacifyTime,
      autoCloseMessage,
      waitPacifyMessage,
      isAutoClose,
      isWaitPacify,
      breakSessionTime,
      breakSessionMessage,
      isOpenBreakSessionTip
    } = this.customMessage
    if (!autoCloseTime || (autoCloseTime < 0 || autoCloseTime > 120)) {
      this.$message.error('访客超时自动结束会话时间范围在0~120分钟之间')
      return false
    }
    if (!waitPacifyTime || (waitPacifyTime < 0 || autoCloseTime > 600)) {
      this.$message.error('访客等待安抚语时间范围在0~600秒之间')
      return false
    }
    if (!breakSessionTime || (breakSessionTime < 0 || breakSessionTime > 120)) {
      this.$message.error('即将关闭提示在0~120分钟之间')
      return false
    }
    if (!autoCloseMessage) {
      this.$message.error('自动结束会话文案不能为空')
      return false
    }
    if (!waitPacifyMessage) {
      this.$message.error('访客等待安抚语文案不能为空')
      return false
    }
    const actionData = {
      url: '/im-center/action/config/visitorSetting/update',
      method: 'POST',
      data: {
        autoCloseTime,
        waitPacifyTime,
        isAutoClose,
        isWaitPacify,
        isOpenBreakSessionTip,
        breakSessionTime,
        breakSessionMessage: String(breakSessionMessage),
        autoCloseMessage: String(autoCloseMessage),
        waitPacifyMessage: String(waitPacifyMessage)
      }
    }
    console.log(actionData)
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success) {
        this.$message.success('保存成功')
      }
    })
  }

  private mounted () {
    const actionData = { url: '/im-center/action/config/visitorSetting/get', method: 'POST', data: {} }
    BasicModule.BasicCommonAction(actionData).then(res => {
      if (res && res.success && res.data) {
        const {
          autoCloseMessage,
          isAutoClose,
          autoCloseTime,
          isWaitPacify,
          waitPacifyTime,
          waitPacifyMessage,
          breakSessionTime,
          breakSessionMessage,
          isOpenBreakSessionTip
        } = res.data
        this.customMessage = {
          autoCloseMessage,
          isAutoClose,
          autoCloseTime,
          isWaitPacify,
          waitPacifyTime,
          waitPacifyMessage,
          breakSessionTime: breakSessionTime || 2,
          breakSessionMessage: breakSessionMessage || '非常抱歉，由于您长时间未说话，系统即将关闭您的会话，如有未解决问题，清及时回复！',
          isOpenBreakSessionTip: isOpenBreakSessionTip || false
        }
        console.log(this.customMessage)
      } else {
        this.customMessage = {
          autoCloseMessage: '非常抱歉，由于您长时间未说话，您的会话已被系统关闭。若有问题，您可以再次发起咨询！',
          isAutoClose: false,
          autoCloseTime: 10,
          isWaitPacify: false,
          waitPacifyTime: 10,
          breakSessionTime: 2,
          breakSessionMessage: '非常抱歉，由于您长时间未说话，系统即将关闭您的会话，如有未解决问题，清及时回复！',
          isOpenBreakSessionTip: false,
          waitPacifyMessage: '客服正在快马加鞭赶来～～'
        }
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .customMessage
    padding 24px
    border-radius 10px
    height calc(100% - 40px)
    overflow auto
    box-sizing border-box
    margin 0 2px 2px 0
    border 1px solid #ecf0f3
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    .ipt
      width 80px
    .tip
      font-size 12px
      color #303753
      margin 0px 5px
    .text
      max-width 700px
    .tooltip
      color #a5a5ad
      font-size 12px
      cursor pointer
    .tipBox
      width 470px
      background #F8FAFD
      border-radius 4px
      font-size 12px
      padding 5px 10px
      margin-top 16px
</style>
